<template>
  <div class="container-box">
    <div class="header-box">
      <div class="header-title">SRM采购数字化平台</div>
      <div class="header-phone">
        <a-icon theme="filled" type="phone" />
        <span class="phone">020-889675678</span>
      </div>
    </div>
    <div class="content-box">
      <div class="content-header">
        <a-steps size="small" :current="currentStepValue">
          <a-step v-for="item in stepList" :key="item.title" :title="item.title" />
        </a-steps>
      </div>
      <div class="content-center">
        <div v-show="currentStepValue === 0">
          <a-card title="基础信息" :bordered="false">
            <div>供应商全称、统一社会信用代码、法定代表人</div>
            <div>联系地址、联系电话、经营范围</div>
            <div>开户行、收款账号、收款人</div>
          </a-card>
          <a-card title="附件文件" :bordered="false">
            <div>
              <h4>营业执照</h4>
              <img class="bl-img" src="@/assets/img/business-license.png" alt="">
              <div>（例图）</div>
            </div>
          </a-card>
        </div>
        <div v-show="currentStepValue === 1">
          <div class="tab-title">供应商企业信息越完善，评估准确度越高</div>
          <div class="form-box">
            <a-form-model
              ref="formRef"
              :model="formData"
              :rules="formRules"
              layout="vertical">
              <a-row :gutter="24">
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="供应商全称" prop="supplierFullName">
                    <a-input v-model="formData.supplierFullName" placeholder="请输入供应商全称" />
                  </a-form-model-item>
                </a-col>
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="统一社会信用代码" prop="uscCode">
                    <a-input v-model="formData.uscCode" placeholder="请输入统一社会信用代码" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="法定代表人" prop="legalRepresentative">
                    <a-input v-model="formData.legalRepresentative" placeholder="请输入法定代表人" />
                  </a-form-model-item>
                </a-col>
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="联系电话" prop="phone">
                    <a-input v-model="formData.phone" placeholder="请输入联系电话" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="联系地区" prop="contactArea">
                    <a-cascader v-model="formData.contactArea" :options="contactAreaOptions" placeholder="请选择联系地区" />
                  </a-form-model-item>
                </a-col>
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="地址" prop="address">
                    <a-input v-model="formData.address" placeholder="请输入地址" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :md="24" :sm="24">
                  <a-form-model-item label="经营范围" prop="businessScope">
                    <a-input v-model="formData.businessScope" placeholder="请输入经营范围" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="开户行" prop="depositBank">
                    <a-input v-model="formData.depositBank" placeholder="请输入开户行" />
                  </a-form-model-item>
                </a-col>
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="收款账号" prop="receivablesAccount">
                    <a-input v-model="formData.receivablesAccount" placeholder="请输入收款账号" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="收款人" prop="receivablesPerson">
                    <a-input v-model="formData.receivablesPerson" placeholder="请输入收款人" />
                  </a-form-model-item>
                </a-col>
                <a-col :md="12" :sm="24">
                  <a-form-model-item label="工商营业执照(三合一)" prop="businessLicense">
                    <a-upload
                      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                      list-type="picture-card"
                      :file-list="fileList"
                      @preview="handlePreview"
                      @change="handleChange"
                    >
                      <div v-if="fileList.length < 8">
                        <a-icon type="plus" />
                        <div class="ant-upload-text">Upload</div>
                      </div>
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                      <img alt="example" style="width: 100%" :src="previewImage" />
                    </a-modal>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </div>
        <div v-show="currentStepValue === 2">
          <div class="tip-box">
            平台客服联系确认中...
          </div>
        </div>
        <div v-show="currentStepValue === 3">
          <div class="tip-box">
            入驻成功...
          </div>
        </div>
      </div>
      <div class="content-footer">
        <a-button v-show="[0, 2, 3].includes(currentStepValue)" type="primary" class="curent-btn" @click="onNext">{{ buttonText }}</a-button>
        <a-button v-show="[1].includes(currentStepValue)" type="primary" class="curent-btn" @click="onSubmit">{{ buttonText }}</a-button>
      </div>
    </div>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export default {
  name: 'EnterApply',
  data() {
    return {
      currentStepValue: 0,
      stepList: [
        { title: '入驻资料介绍' },
        { title: '完善入驻资料' },
        { title: '平台客服联系确认' },
        { title: '入驻成功' }
      ],
      formData: {
        supplierFullName: '',
        uscCode: '',
        legalRepresentative: '',
        phone: '',
        contactArea: [],
        address: '',
        businessScope: '',
        depositBank: '',
        receivablesAccount: '',
        receivablesPerson: '',
      },
      formRules: {
        supplierFullName: [{ required: true, message: '请输入供应商全称！', trigger: 'change' }],
        uscCode: [{ required: true, message: '请输入统一社会信用代码！', trigger: 'change' }],
        legalRepresentative: [{ required: true, message: '请输入法定代表人！', trigger: 'change' }],
        phone: [{ required: true, message: '请输入联系电话！', trigger: 'change' }],
        contactArea: [{ required: true, message: '请选择联系地区！', trigger: 'change' }],
        address: [{ required: true, message: '请输入地址！', trigger: 'change' }],
        businessScope: [{ required: true, message: '请输入经营范围！', trigger: 'change' }],
        depositBank: [{ required: true, message: '请输入开户行！', trigger: 'change' }],
        receivablesAccount: [{ required: true, message: '请输入收款账号！', trigger: 'change' }],
        receivablesPerson: [{ required: true, message: '请输入收款人！', trigger: 'change' }],
      },
      contactAreaOptions: [
        {
          value: '1',
          label: '北京市',
          children: [
            {
              value: '11',
              label: '东城区',
            },
            {
              value: '12',
              label: '西城区',
            },
            {
              value: '13',
              label: '朝阳区',
            },
          ],
        },
        {
          value: '2',
          label: '广东省',
          children: [
            {
              value: '21',
              label: '广州市',
              children: [
                {
                  value: '211',
                  label: '白云区',
                },
                {
                  value: '212',
                  label: '天河区',
                },
                {
                  value: '213',
                  label: '海珠区',
                },
                {
                  value: '214',
                  label: '越秀区',
                },
              ],
            },
          ],
        },
      ],
      previewVisible: false,
      previewImage: '',
      fileList: [],
    }
  },
  computed: {
    buttonText() {
      const textEnum = {
        0: '申请入驻',
        1: '确认申请',
        2: '下一步',
        3: '返回第一页',
      };
      return textEnum[this.currentStepValue];
    }
  },
  methods: {
    onNext() {
      this.currentStepValue++;
      if (this.currentStepValue >= 4) this.currentStepValue = 0;
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$confirm({
            title: '操作提醒',
            content: '确定入驻申请？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              this.currentStepValue++;
              this.$message.success(`供应商入驻申请成功，后续会有客服与您联系客服电话：020-889675678`);
            }
          });
        } else {
          this.$message.error(`请把表单补充完整！`);
        }
      });
    },
    
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
  }
}
</script>

<style lang="less" scoped>
.container-box {
  background-color: #F5F6F8;
  height: 100vh;
  overflow: auto;
}
.header-box {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  // background-color: #1890FF;
  background-color: rgba(31, 127, 227, 1);
  color: white;
  box-shadow: 0px 4px 12px 0px rgba(31, 127, 227, 0.5);
  .header-title {
    font-size: 20px;
    font-family: SourceHanSansSC-bold;
    font-weight: bold;
  }
  .header-phone {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    font-size: 20px;
    font-family: SourceHanSansSC-bold;
    font-weight: bold;
    .phone {
      margin-left: 10px;
    }
  }
}
.content-box {
  width: 800px;
  margin: 20px auto;
  border-radius: 4px;
  .content-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 0 124px;
    border-radius: 12px;
    background-color: rgba(239, 246, 253, 1);
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);

    position: relative;
    z-index: 2;
    // box-shadow: 5px 5px 10px #EFF6FD, -5px 5px 10px #EFF6FD;
  }
  .content-center {
    height: 550px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

    position: relative;
    z-index: 1;

    overflow: auto;
    .bl-img {
      width: 300px;
      height: 220px;
    }
    .tab-title {
      background-color: rgba(245, 245, 245, 1);
      height: 40px;
      line-height: 40px;
      padding: 0 25px;
    }
    .form-box {
      padding: 15px 30px;
    }
    .tip-box {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
      height: 550px;
    }
  }
  .content-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 63px;
    background-color: rgba(237, 245, 253, 1);
    border-radius: 6px;
    border: 1px solid rgba(187, 187, 187, 1);

    position: relative;
    z-index: 2;
  }
}

.curent-btn {
  width:300px;
  height:36px;
  font-size:14px;
}
</style>
